<template>
  <div class="application-detail-container">
    <van-panel title="我的申请信息">
      <application-info
        :application-list="list"
      />
    </van-panel>
    <van-panel title="担保品信息">
      <van-cell-group>
        <van-cell>
          <van-col span="24">房屋类型：全称担保（反担保）</van-col>
        </van-cell>
        <van-cell>
          <van-col span="24">房屋地址：山东省临沂市xx区xxx小区11-1-101</van-col>
        </van-cell>
        <van-cell>
          <van-col span="24">房屋面积：119 ㎡</van-col>
        </van-cell>
      </van-cell-group>
    </van-panel>
    <van-panel title="申请流程">
      <flow-steps
        :step-list="stepList"
      />
    </van-panel>
    <van-tabbar route :safe-area-inset-bottom="true" class="footTabbar">
      <van-tabbar-item to="/" class="left-route van-button--default">返回</van-tabbar-item>
      <van-tabbar-item to="/article" class="van-button--info">信息完善</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import {Button, Tabbar, TabbarItem, Swipe, SwipeItem, Panel, CellGroup, Col, Row, Cell, Toast} from 'vant'
import FooterTabbar from '@/components/FooterTabbar.vue'
import { stepList } from '@/api/flow.ts'
import FlowSteps from '@/components/FlowSteps/index.vue'
import ApplicationInfo from '@/components/ApplicationInfo/index.vue'
import { getUsers } from '@/api/users'

@Component({
  name: 'Home',
  components: {
    [Button.name]: Button,
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [CellGroup.name]: CellGroup,
    [Col.name]: Col,
    [Row.name]: Row,
    [Cell.name]: Cell,
    FooterTabbar,
    [Panel.name]: Panel,
    FlowSteps,
    ApplicationInfo
  }
})
export default class extends Vue {
  private stepList: any[] = []
  private applicationInfoList: any[] = []
  private list:any = []
  private listQuery = {
    current: 1,
    size: 10
  }
  mounted () {
    this.getStepList()
    this.onLoad()
  }

  private getStepList () {
    let params = {
      procDefId: 'Leave:59:ddfbb8f7-7487-11ea-b336-0242ac120004',
      procInstId: 'f65453d8-7487-11ea-b336-0242ac120004'
    }
    stepList(params).then((res: any) => {
      this.stepList = res.data
    })
  }
  private async onLoad () {
    const { data } = await getUsers(this.listQuery)
    this.list = data.records
    this.list = [
      { userName: '张三', name2: 'test' }
    ]
  }
}
</script>
<style lang="scss">
  .application-detail-container{
    .van-panel{
     margin-bottom: 10px;
    }
    .van-tabbar{
      height: 45px;
      line-height: 45px;
      .van-tabbar-item{
        font-size: 14px ;
      }
    }
  }
</style>
